<template>
  <div>
    <el-cascader
      v-model="id"
      v-loading="loading"
      style="width: 100%"
      placeholder="请选择分类"
      :options="categoryData"
      :props="{ expandTrigger: 'hover', emitPath: false, value: 'id', label: 'categoryName'}"
      clearable
      @change="handleChange"
    >
      <template slot-scope="{ node, data }">
        <span>{{ data.categoryName }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
</template>
<script>
import { selectCategoryTree } from '@/api/erp/category'

/**
 * @author yizuomin
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'CategoryQuery',
  props: {
    value: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      id: '',
      categoryData: [],
      loading: false
    }
  },
  mounted() {
    this.getCategoryData()
  },
  methods: {
    // 获取分类树
    getCategoryData() {
      this.loading = true
      selectCategoryTree({ state: '1' }).then(resp => {
        if (resp.success) {
          this.categoryData = resp.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    init(id) {
      this.id = id
    },
    handleChange(row) {
      this.$emit('choose', row)
    }
  }
}
</script>

<style scoped>

</style>
